<template>
<!--  wrap控制是否自动换行-->
  <el-space wrap width="100vw">
    <el-card class="box-card" style="width: 30%;height: 450px">
      <template #header>
        <div class="card-header">
          <span>馆藏</span>
<!--          <el-button class="button" text>Operation button</el-button>-->
        </div>
      </template>

      <div class="text item">
        藏品总数:313件
<!--        后续设置链接-->

      </div>
      <div class="total">
        <el-button @click="$router.push('/specialMuseum')">
          <!--        后续设置链接-->
          <span class="size">藏品库</span>
        </el-button>
      </div>
    </el-card>

    <el-card class="box-card" style="width: 50%;height: 450px">
      <template #header>
        <div class="card-header">
          <span>工艺美术博物馆</span>
<!--          <el-button class="button" text>Operation button</el-button>-->
        </div>
      </template>
      <div class="content">
        <img src="https://img.taoart.com/group1/M00/0D/B8/CqjkJ18WZ72APFmkAAX2L1zy9no611.png" style="width: 250px;height: 350px" title="点击显示详情"/>
        <span>
          <h1>G20杭州峰会国色天香茶具</h1>
          <p>壶长24厘米,宽15厘米,高17厘米。杯长14厘米,宽10厘米,高6厘米。</p>
          <p>茶具共九头,包含一壶四杯四碟。嵇锡贵大师是G20杭州峰会国宴瓷画面总设计师。
            通过中国传统青花瓷的艺术形式表现牡丹盛开之景,设计语言简练概括,艺术风格典雅庄重。</p>
          <p>嵇锡贵,女,1941年生于湖州。高级工艺美术师,
            中国工艺美术大师,越窑青瓷烧制技艺代表性传承人</p>

        </span>
      </div>
    </el-card>

<!--    得显示博物馆名及一件藏品的图片;点击后会出现相关介绍;博物馆名字点击后能跳转到对应专题展览-->
    <el-card class="box-card" style="width: 40%;height: 450px">
      <template #header>
        <div class="card-header">
          <span>中国刀剪剑博物馆</span>
<!--          <el-button class="button" text>Operation button</el-button>-->
        </div>
      </template>
      <div class="content">
        <img src="https://img.taoart.com/group1/M00/0D/BC/CqjkJ18Y6uSAQz00AChK3Fqv26s724.jpg" style="width: 250px;height: 350px"/>
        <span>
          <h1>清代龙泉装七星宝剑</h1>
          <p>长89厘米，宽3.5厘米。</p>
          <p>剑根部位有"敕魔"字样，剑身上则有七星阵錾刻，所以应为典型的钢铁法剑。
            此外剑身上的剑槽深邃，工艺细腻。剑装具也保存基本完好，剑格元宝形，剑首云形。</p>
        </span>
      </div>
    </el-card>

    <el-card class="box-card" style="width:40%;height:450px">
      <template #header>
        <div class="card-header">
          <span>中国扇博物馆</span>
<!--          <el-button class="button" text>Operation button</el-button>-->
        </div>
      </template>
      <div class="content">
        <img src="https://img.taoart.com/group1/M00/0D/BB/CqjkJ18XnW6ALrhKACKpco1OZuU587.jpg" style="width: 250px;height: 350px"/>
        <span>
          <h1>冒襄秋江泛舟图扇面</h1>
          <p>扇面长16.5厘米，展48.5厘米。</p>
          <p>藏品为泥金扇面上所作,具有明清时期扇面书画特色,扇面通幅用淡墨图写,滩岸布置崖冈枯木,更有一舟泛于水上,明润秀雅。</p>
          <p>冒襄(1611-1693),字辟疆,是明末清初的文学家,为"明季四公"之一。
            虽出生世代仕官之家,但一生坎坷:多次乡试落第,又遭遇明朝灭亡,一生颠沛流离,生活拮据。</p>
        </span>
      </div>
    </el-card>

    <el-card class="box-card" style="width: 40%;height: 450px">
      <template #header>
        <div class="card-header">
          <span>中国伞博物馆</span>
<!--          <el-button class="button" text>Operation button</el-button>-->
        </div>
      </template>
      <div class="content">
        <img src="https://img.taoart.com/group1/M00/0D/BB/CqjkJ18XknqACio2AAKxbSEnD5Q409.jpg" style="width: 250px;height: 350px"/>
        <span>
          <h1>印江土家族双凤朝阳油纸伞</h1>
          <p>长53厘米，半径43厘米。</p>
          <p>绿色油纸伞面，绘双凤朝阳图案，共28根伞骨。</p>
          <p>在贵州，人们认为油纸伞的"油"与"有"谐音，"纸"与"子"同音，伞张开后呈圆形，在喜事中常被寓为早有贵子，圆满吉祥的意思。</p>
        </span>
      </div>
    </el-card>
  </el-space>
</template>

<script setup>

</script>

<style scoped>
.box-card{
  margin: 15px 10px;
}

.total{
  color: #606266;
  font-size: 25px;
  margin-top:10px;
  margin-right: 10px;
}
.content{

  float: left;
  position: relative;
  /*box-shadow: 3px 3px 10px #666;*/
  overflow:hidden;
}
.content span{
  width: 250px;
  height: 350px;
  background: #333;
  position: absolute;
  left: -500px;
  top: 0px;
  filter: Alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
  padding: 20px;
  -webkit-transition: left 0.5s ease;
}

.content span h1{
  height: 20px;
  color: #fff;
  font-size:16px;
  text-align: center;
  position: relative;
  left: -500px;
  -webkit-transition: left 1s ease;
}

.content span p{
  line-height: 25px;
  font-size:14px;
  color: #fff;
  position: relative;
  overflow-wrap: break-word;
  left: -500px;
  -webkit-transition: left 1s ease;
}

.content:hover span{
  left:0px;
}

.content:hover span h1{
  left: 0px;
}

.content:hover span p{
  left: 0px;
}
/*.total button{*/
/*  !* 清除默认边框 *!*/
/*  border:0;*/
/*  outline:none;*/
/*  !*清除默认背景 *!*/
/*  background-color: transparent;*/
/*}*/
</style>